<html>
<head>
<title>Postponer Manager Options</title>

<style>
#content { width: 500px; border: #C90000 solid 10px; border-radius: 10px; background: white; margin-left:auto; margin-right:auto; padding: 10px;}
body {font-family:sans-serif; background: #DDD;}
#logo {float:right; background-image:url(icon128.png); width:128px; height:128px;}
#load {display:block; text-align: center;}
</style>

<script src='jquery.js'></script>
<script src='ril.js'></script>

<script>
// default options
var def_badge = false;
var def_username = '';
var def_password = '';
var def_width = 350;
var def_height = 400;

// current options
var badge;
var username;
var password;
var width;
var height;

/**
 * Erases all options stored in local storage
 */
function eraseOptions() {	
	localStorage.removeItem('badge');
	localStorage.removeItem('username');
	localStorage.removeItem('password');
	localStorage.removeItem('width');
	localStorage.removeItem('height');
}

/**
 * Loads options stored in local storage, or loads default ones if
 * stored options do not exist or are not valid
 */
function loadOptions() {	
	badge = localStorage['badge'] == 'true' ? true : false;
	$('#badge')[0].checked = badge;
	
	username = localStorage['username'];
	if (username == 'undefined') {
		username = def_username;
	}
	$('#username').val(username);
	
	password = localStorage['password'];
	if (password == 'undefined') {
		password = def_password;
	}
	$('#password').val(password);
	
	width = parseInt(localStorage['width']);
	if (width == 'undefined' || isNaN(width)) {
		width = def_width;
	}
	$('#width').val(width);
	
	height = parseInt(localStorage['height']);
	if (height == 'undefined' || isNaN(height)) {
		height = def_height;
	}
	$('#height').val(height);
}

/**
 * Saves current options to local storage
 */
function saveOptions() {
	localStorage['badge'] = String(badge);
	localStorage['username'] = username;
	localStorage['password'] = password;
	localStorage['width'] = width;
	localStorage['height'] = height;
	
	var bg = chrome.extension.getBackgroundPage();
	bg.stopRequest();
	bg.startRequest();
}

/**
 * Checks if a number is being entered
 */
function isNumberKey(evt) {
	var charCode = (evt.which) ? evt.which : event.keyCode
	
	if (charCode > 31 && (charCode < 48 || charCode > 57))
		return false;

	return true;
}

$(document).ready(function() {
	loadOptions();
	
	if ($('#badge')[0].checked) $('#badge-options').show();
	else $('#badge-options').hide();	
	
	$('#badge').live('change', function() {
		if ($(this)[0].checked) $('#badge-options').show('slow');
		else $('#badge-options').hide('slow');
		badge = $(this)[0].checked;
		saveOptions();
	});
	
	$('#username').live('change', function() {
		username = $(this).val();
		saveOptions();
	});
	
	$('#password').live('change', function() {
		password = $(this).val();
		saveOptions();
	});
	
	$('#width').live('change', function() {
		width = parseInt($(this).val());
		if (isNaN(width)) {
			width = def_width;
			$(this).val(def_width)
		}
		saveOptions();
	});
	
	$('#height').live('change', function() {
		height = parseInt($(this).val());
		if (isNaN(height)) {
			height = def_height;
			$(this).val(def_height)
		}
		saveOptions();
	});
	
	$('#check').live('click', function() {
		$('#message').text('Checking...');
		ril.authenticate(username, password, function(status) {
			if (status == 200) {
				$('#message').text('Correct');
			}
			else if (status == 401) {
				$('#message').text('Incorrect username or password, try again.');
			}
			else if (status == 403) {
				$('#message').text('API limit exceeded, try again later.');
			}
			else {
				$('#message').text('Unexpected error: ' + status);
			}
		});
	});
	
	$('#erase').live('click', function() { 
		eraseOptions(); 
		location.reload();
	});
});

</script>
</head>

<body>

<div id='content'>
	<span id='logo'></span>
	<h1>Postponer Manager options</h1>
	
	<p>Options are saved automatically.</p>
	
	<h3>Icon badge</h3>
	<p>
		<input type='checkbox' name='badge' id='badge' /><label for='badge'>Show unread count in icon badge (requires authentication)</label>
	</p>
	<div id='badge-options'>
		<p>Badge is updated once every five minutes.</p>
		<table>
			<tr>
				<td><label for='username'>Username</label></td>
				<td><input type='text' name='username' id='username' /></td>
			</tr>
			<tr>
				<td><label for='password'>Password</label></td>
				<td><input type='password' name='password' id='password' /></td>
			</tr>
		</table>
		<p><button id='check'>Check</button> <span id='message'></span>
		
	</div>
	
	<h3>Popup size</h3>
	<table>
		<tr>
			<td><label for='width'>Width</label></td>
			<td><input type='text' name='width' id='width' onkeypress='return isNumberKey(event)' /></td>
		</tr>
		<tr>
			<td><label for='height'>Height</label></td>
			<td><input type='text' name='height' id='height' onkeypress='return isNumberKey(event)' /></td>
		</tr>
	</table>
	
	<h3>Erase Options</h3>
	<p>
		<button id='erase'>Erase all options</button><br />
	</p>
	
	<hr />
	
	<div id='credits'>
	<h3>Credits and License</h3>
	<p>
		<strong>Author</strong><br /> 
		Juliana Pe&ntilde;a <br />
		<a href='http://julianapena.com'>http://julianapena.com</a><br />
		<a href='http://twitter.com/limitedmage'>@limitedmage</a><br />
		If you like this extension, please <a href="http://julianapena.com/donate.html?ref=Postponer%20Manager">buy me a cup of coffee</a>.
	</p>
	<p>
		<strong>Code</strong><br />
		This extension is open source under the <a href='http://creativecommons.org/licenses/GPL/2.0/'>GPLv2</a>. More info at <a href='http://code.google.com/p/chromepostponer/'>Postponer's Google Code page</a>.
	</p>
	</div>
</div>

</body>
</html>